<template>
    <div class="outbox">
        <Box v-for="item in boxlist" :key="item.prop" :title="item.label" disc="1234" :text="item.text">
        </Box>
    </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, Ref, ref } from "vue";
import Box from "./_box.vue";
import { REANIMATIONTIME } from "@b/model/enum";
import { Http } from "@b/model/base/http";

const boxlist = [{
    label: '单导 | 12导心电', prop: 'servicedTotalPerson', text: '心电'
}, {
    label: '血糖', prop: 'servicingTotalPerson', text: '血糖'
}, {
    label: '血压', prop: 'transferTotalPerson', text: '血压'
}, {
    label: '体温', prop: 'servicedTotalMoney', text: '体温'
}, {
    label: '心率', prop: 'servicingTotalMoney', text: '心率'
}, {
    label: 'BMI', prop: 'transferTotalMoney', text: 'BMI'
}]
const data: Ref<{ [key: string]: string }> = ref({})
const render = async () => {
    const res = await new Http().request('/v1/bigscreen/GetAnalyseInfo', { method: 'GET', cache: true })
    data.value = {}
    await nextTick()
    data.value = res
}
onMounted(() => {
    render()
    setInterval(() => {
        render()
    }, REANIMATIONTIME);
})
</script>

<style scoped>
.outbox {
    display: grid;
    color: var(--color-white);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 0 28px 40px;
    gap: 40px;
    width: 100%;
    height: 100%;
}
</style>